<div class="register-container">

  <p class="rent-head" (click)="cancel()">租房系统</p>

  <form nz-form [nzAutoTips]="autoTips" [formGroup]="validateForm" class="register-form">
    <h1 class="register-title">租房系统注册</h1>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>昵称</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input formControlName="nickname" placeholder="nickname" type="text"/>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" nzOffset="0">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>出生日期</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <nz-date-picker formControlName="birthday" nzPlaceHolder="Please select your birthday!"></nz-date-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="gender" nzRequired>性别</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="Please select your gender!">
            <nz-select
              id="gender"
              formControlName="sex"
              nzPlaceHolder="Select a option and change input text above"
            >
              <nz-option [nzValue]="1" nzLabel="男"></nz-option>
              <nz-option [nzValue]="2" nzLabel="女"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" nzOffset="0">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>住址</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input formControlName="address" placeholder="address" type="text"/>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>电话号码</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input formControlName="phone" placeholder="phone" type="text"/>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" nzOffset="0">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" placeholder="password"/>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input formControlName="email" placeholder="email" type="email" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" nzOffset="0">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>确认密码</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input type="password" formControlName="confirmPassword" placeholder="confirm your password" />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>
            验证码
          </nz-form-label>
          <nz-form-control
            [nzSpan]="12"
          >
            <div nz-row [nzGutter]="6">
              <div nz-col [nzSpan]="12">
                <input type="text" nz-input formControlName="code" id="captcha" />
              </div>
              <div nz-col [nzSpan]="10">
                <button (click)="getCaptcha()" class="btn-normol btn-captcha" *ngIf="showCodeBtn">验证码</button>
                <button class="btn-normol btn-disabled" disabled *ngIf="!showCodeBtn">{{codeCount}}</button>
              </div>
            </div>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12" nzOffset="0">
        <nz-form-item>
          <nz-form-control [nzOffset]="4" [nzSpan]="7">
            <button class="btn-normol btn-cancel" (click)="cancel()">取消</button>
          </nz-form-control>
          <nz-form-control [nzOffset]="2" [nzSpan]="7">
            <button class="btn-normol btn-register" (click)="submitForm()">注册</button>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

</div>


